<template>
  <div class="weui-panel-topup">
    <!-- <Weui-search-bar @search="search"></Weui-search-bar> -->
    <div class="weui-flex">
      <div class="weui-flex__item">
        <div class="weui-cells weui-cells_form mg-tb">
          <div class="weui-cell weui-cell">
            <p class="explanation">身份证照片上传</p>
          </div>
          <p class="tip">
              注:请上传清晰、有效的身份证照片,需包括正、反面。 <br/>
              图片需不模糊、无遮盖、无反光。
            </p>
        </div>

        <div class="upload nowrap">
          <div class="upload-wrapper">
            <input multiple class="file-input" type="file" placeholder="ID" id="front-id" accept="image/*" @change="frontIdChange"/>
            <img :src="cardFront" alt="" :class="{'hidden' : cardFront == '', 'card-image': true }" />
            <div v-bind:class="{'upload-tip': true, 'hidden' : cardFront !== '' }">
              <div class="exap-image">
                <img src="img/idcard/exap-front.png" alt="">
              </div>
              <div class="tip-text">
                点击上传(人像面)
              </div>
              <div class="add-btn">
                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="id_svgCanvas" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve" preserveAspectRatio="none">
                  <rect class="st2" width="24" height="24" style="fill:none;;"></rect>
                  <path id="58128982_shock_x5F_color_focus" class="stshockcolor" d="M12,2C6.48,2,2,6.48,2,12c0,5.52,4.48,10,10,10c5.52,0,10-4.48,10-10  C22,6.48,17.52,2,12,2z"     style="fill:#66BB6A;;" data-st="fill:#66BB6A;;"></path>
                  <path class="st0" d="M12,2C6.49,2,2,6.49,2,12s4.49,10,10,10s10-4.49,10-10S17.51,2,12,2z M12,20c-4.42,0-8-3.59-8-8  c0-4.42,3.58-8,8-8c4.41,0,8,3.58,8,8C20,16.41,   16.41,20,12,20z" style="opacity:0.2;fill:#FFFFFF;;"></path>
                  <polygon class="st1" points="17,13 13,13 13,17 11,17 11,13 7,13 7,11 11,11 11,7 13,7 13,11 17,11 " style="fill:#FFFFFF;;"></polygon>
                </svg>
              </div>
            </div>
          </div>
        </div>

        <div class="upload nowrap">
          <div class="upload-wrapper">
            <input multiple class="file-input" type="file" placeholder="ID" id="back-id" accept="image/*" @change="backIdChange"/>
            <img :src="cardReverse" alt="" :class="{'hidden' : cardReverse == '', 'card-image': true }" />
            <div v-bind:class="{'upload-tip': true, 'hidden' : cardReverse !== '' }">
              <div class="exap-image">
                <img src="img/idcard/exap-back.png" alt="">
              </div>
              <div class="tip-text">
                点击上传(国徽面)
              </div>
              <div class="add-btn">
                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="id_svgCanvas" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve" preserveAspectRatio="none">
                  <rect class="st2" width="24" height="24" style="fill:none;;"></rect>
                  <path id="58128982_shock_x5F_color_focus" class="stshockcolor" d="M12,2C6.48,2,2,6.48,2,12c0,5.52,4.48,10,10,10c5.52,0,10-4.48,10-10  C22,6.48,17.52,2,12,2z"     style="fill:#66BB6A;;" data-st="fill:#66BB6A;;"></path>
                  <path class="st0" d="M12,2C6.49,2,2,6.49,2,12s4.49,10,10,10s10-4.49,10-10S17.51,2,12,2z M12,20c-4.42,0-8-3.59-8-8  c0-4.42,3.58-8,8-8c4.41,0,8,3.58,8,8C20,16.41,   16.41,20,12,20z" style="opacity:0.2;fill:#FFFFFF;;"></path>
                  <polygon class="st1" points="17,13 13,13 13,17 11,17 11,13 7,13 7,11 11,11 11,7 13,7 13,11 17,11 " style="fill:#FFFFFF;;"></polygon>
                </svg>
              </div>
            </div>
          </div>
        </div>
        <div class="weui-cells nowrap flex-box actions">
          <div class="weui-btn_area button-area weui-cell weui-cell_access" v-if="!uploadSuccess">
            <button class="weui-btn weui-btn_primary button-half" @click="uploadIdCard">提交</button>
          </div>
          <div class="weui-btn_area button-area weui-cell weui-cell_access">
            <button class="weui-btn weui-btn_default button-half" @click="back2main">返回</button>
          </div>
        </div>
        </div>

        <div class="loading-wrapper" v-if="showLoading">
          <div class="loading-content">
            <svg class="loading-icon" style="width: 1em; height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1439"><path d="M626.34496 121.8304c0 53.15072-43.07968 96.2304-96.2304 96.2304-53.1456 0-96.2304-43.07968-96.2304-96.2304C433.88928 68.67968 476.96896 25.6 530.11456 25.6c53.1456 0 96.2304 43.0848 96.2304 96.2304zM530.11456 833.9968c-46.50496 0-84.1984 37.69856-84.1984 84.1984s37.69856 84.1984 84.1984 84.1984 84.1984-37.69856 84.1984-84.1984-37.69344-84.1984-84.1984-84.1984z m398.18752-253.83936c-33.21856 0-60.14464-26.92096-60.14464-60.14464 0-33.21856 26.92608-60.14464 60.14464-60.14464 33.22368 0 60.14464 26.92608 60.14464 60.14464-0.00512 33.21856-26.9312 60.14464-60.14464 60.14464zM228.15744 520.0128c0-53.1456-43.07968-96.2304-96.2304-96.2304-53.1456 0-96.2304 43.07968-96.2304 96.2304 0 53.1456 43.07968 96.2304 96.2304 96.2304 53.15072 0 96.2304-43.0848 96.2304-96.2304z m88.448-349.59872c37.5808 37.5808 37.5808 98.5088 0 136.08448-37.5808 37.5808-98.5088 37.5808-136.0896 0s-37.5808-98.5088 0-136.0896 98.5088-37.5808 136.0896 0.00512z m444.03712 580.12672c-28.1856 28.1856-28.1856 73.8816-0.00512 102.0672 28.1856 28.1856 73.8816 28.1856 102.0672 0 28.1856-28.1856 28.1856-73.8816 0-102.0672-28.18048-28.19072-73.87648-28.19072-102.06208 0z m85.05856-478.06464c-18.7904 18.7904-49.25952 18.7904-68.03968 0-18.79552-18.79552-18.79552-49.25952 0-68.0448a48.09728 48.09728 0 0 1 68.03968 0c18.7904 18.7904 18.7904 49.25952 0 68.0448zM316.60544 733.52704c-37.5808-37.5808-98.5088-37.5808-136.0896 0s-37.5808 98.5088 0 136.08448c37.5808 37.5808 98.5088 37.5808 136.08448 0 37.5808-37.57568 37.5808-98.50368 0.00512-136.08448z" fill="#ffffff" p-id="1440"></path></svg>
            <span class="loading-text">
              {{loadingText}}
            </span>
          </div>
        </div>
        
      </div>
    </div>
</template>

<script>
import { mapState, mapMutations } from 'Vuex'

export default {
  data() {
    return {
      mePlayer: {
        headUrl: '',
        nickname:'',
        amount: 0
      },
      cardFront: '',
      cardReverse: '',
      limitSize:  20000000,
      loadingText: '文件正在上传中...',
      showLoading: false,
      uploadSuccess: false
    }
  },
  computed: {
    ...mapState(['api', 'token', 'areaCode', 'user'])
  },
  mounted() {
    let userinfo = JSON.parse(localStorage.getItem('userinfo')).userinfo;

    this.mePlayer = userinfo;
    this.mAmount = userinfo.gameAmount;

    this.getIdCard();

  },
  methods: {
    imageCompress(file, cb) {
      let img = new Image();
      img.onload = () => {
        let cvs = document.createElement('canvas');
        let ctx = cvs.getContext('2d');
        let w = img.width, h = img.height;
        console.log(w, h)
        const MAX_HEIGHT = 1280;
        if(img.height > MAX_HEIGHT) {
            // 宽度等比例缩放 *=
            img.width *= MAX_HEIGHT / img.height;
            img.height = MAX_HEIGHT;
        }
        cvs.width = img.width;
        cvs.height = img.height;
        ctx.clearRect(0, 0, cvs.width, cvs.height);
        ctx.drawImage(img, 0, 0, img.width, img.height);
        let src = cvs.toDataURL('image/jpeg')
        cb(src);
      }
      img.src = file.src;
    },
    frontIdChange(ev) {
      window.btn_sound.play();

      let reader = new FileReader();
      let file = ev.target.files[0];
      if(file.size > this.limitSize) {
        return $.alert('图片大小超过限制，请重新选择。')
      }
      reader.onload = (e) => {
        let target = e.target;
        if(target.readyState === 2) {
          // this.cardFront = target.result;
          // 检查是否开始压缩
          // this.imageCompress();
          console.log(target.result.length, '1111')
           this.imageCompress({src: target.result}, (src)=>{
             this.cardFront = src
           })
        }
      }
      reader.readAsDataURL(file)
    },
    backIdChange(ev) {
      window.btn_sound.play();

      let reader = new FileReader();
      let file = ev.target.files[0];
      if(file.size > this.limitSize) {
        return $.alert('图片大小超过限制，请重新选择。')
      }
      reader.onload = (e) => {
        let target = e.target;
        if(target.readyState === 2) {
          // this.cardReverse = target.result;
          this.imageCompress({src: target.result}, (src)=>{
             this.cardReverse = src
           })
        }
      }
      reader.readAsDataURL(file)
    },
        // 查询代充玩家ID
    uploadIdCard() {
      window.btn_sound.play();

      if(this.cardFront == '' || this.cardReverse == '') {
        return $.alert('未选择图片！')
      }

      this.showLoading = true;
      console.error(this.cardFront.length, this.cardReverse.length)

      const send = {
        cardFront:  this.cardFront,
        cardReverse:  this.cardReverse
      }

      this.api.homePage.uploadIdCard(send).then(res => res.json()).then(data => {
        console.log('上传身份证信息', data)
        this.showLoading = false;
        if(data.errorCode == 0) {
          $.alert('上传成功')
          this.uploadSuccess = true;
        } else {
          $.alert('上传失败')
        }
      })
    },
    getIdCard() {
      const send = {
      }
      this.api.homePage.getIdCard(send).then(res => res.json()).then(data => {
        console.log('获取身份证信息', data)
        if(data.errorCode == 0) {
          this.cardFront = data.source.cardFront
          this.cardReverse = data.source.cardReverse
        }
      })
    },
    back2main() {
      window.btn_sound.play();
      
      this.$router.push('/PersonalInfo')
    }
  }
}

</script>

<style lang="less" scoped>
.weui-flex__item{
      background: #f5f5f5;
}
.weui-panel-topup {
  height: 100%;
  background: transparent;
}
.weui-flex {
  height: 100%;
  align-items: center;
  justify-content: center;
}
.explanation {
  font-size: 1.1rem;
  text-align: center;
  width: 100%;
}
.tip {
  font-size: 14px;
  color: #f44336;
  text-align: left;
  padding: 0.3rem;
}
.mg-tb {
  margin-top: 6px;
  margin-bottom: 6px;
  background-color: #fff;
}
 .flex-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
 }

 .nowrap {
  flex-wrap: nowrap;
 }

.weui-cell:before {
  border: none!important;
}
.upload {
  display: flex;
  padding: 4px 10px;
   .upload-wrapper {
   position: relative;
  padding: 4px;
   width: 100%;
   height: 10rem;
  display: flex;
    justify-content: center;
    align-items: center;
  //  border: 3px dashed lightgrey;
  background: #66bb6a;
  color: white;
   border-radius: 8px;
   .file-input {
     position: absolute;
     width: 100%;
     height: 100%;
     opacity: 0;
     z-index: 999;
     left: 0;
     top: 0;
   }
   .card-image {
     max-height: 100%;
     max-width: 100%;
   }

   .hidden {
    display: none;
    width: 0;
    height: 0;
    position: absolute;
    * {
      display: none;
      position: absolute;
      width: 0;
      height: 0;
    }
  }
  .upload-tip {
    display: flex;
    justify-content: space-around;
    align-items: center;
        height: 100%;
    .exap-image {
      width: 4rem;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .tip-text {
      font-size: 1rem;
    }
    .add-btn svg{
      width: 3rem;
      height: 3rem;
    }
  }
 }
}

.actions {
  padding: 10px;
  justify-content: center;
}
.button-area {
    width: 48%;
    flex-basis: 48%;
  }
.button-half {
    width: 100%;
    display: inline-block;
  }


.loading-wrapper {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  
  .loading-content {
    width: 8rem;
    height: 8rem;
    display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  background: rgba(0,0,0,.5);
  border-radius: 1rem;
    .loading-icon {
      animation-name: rotation;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
      width: 3rem!important;
      height: 3rem!important;
    }
    .loading-text {
      color: lightcyan;
      flex-basis: 100%;
      width: 100%;

    }
  }
}

@keyframes rotation {
  0% {
    transform: rotateZ(0deg);
  }
  100% {
    transform: rotateZ(359deg);
  }
}
@media screen and (max-width: 350px){
  .tip {
    font-size: 12px!important;
  }
  .exap-image {
    width: 3rem!important;
  }
  .tip-text {
    font-size: 15px!important;
  }
  .add-btn {
    width: 2.4rem!important;
  }
  .upload-wrapper {
    height: 9rem!important;
  }
}

</style>